<script setup>
import OrderIcon from '@/components/icons/OderIcon.vue'
import ProductIcon from '@/components/icons/ProductIcon.vue'
import StatisticIcon from '@/components/icons/StatisticIcon.vue'
import { Box, Odometer, Present, Setting, User } from '@element-plus/icons-vue'
import { ref, watchEffect } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()
defineProps(['collapse'])
const defaultActiveIndex = ref('1')

const routeMap = {
  '/dashboard': '1',
  '/content': '7',
  '/orders': '2',
  '/products': '3',
  '/marketing/campaign': '6',
  '/statistics': '4',
  '/setting': '5',
  '/customer': '8',
}
watchEffect(() => {
  Object.entries(routeMap).forEach(([key, value]) => {
    if (route.path.startsWith(key)) {
      defaultActiveIndex.value = value
    }
  })
})
</script>

<template>
  <div class="home-aside">
    <div class="main-aside-header">
      <img alt="" src="@/assets/favicon.svg" />
      <h3 v-if="!collapse" class="no-animation">辉瑞管理平台</h3>
    </div>
    <el-menu
      :collapse="collapse"
      :collapse-transition="false"
      :default-active="defaultActiveIndex"
      :router="true"
      active-text-color="#fff"
      background-color="#001529"
      text-color="hsla(0, 0%, 100%, .65)"
    >
      <el-menu-item index="1" route="/dashboard">
        <el-icon>
          <Odometer />
        </el-icon>
        <span>仪表盘</span>
      </el-menu-item>
      <el-menu-item index="7" route="/content">
        <el-icon>
          <Box />
        </el-icon>
        <span>内容管理</span>
      </el-menu-item>
      <el-menu-item index="8" route="/customer">
        <el-icon>
          <User />
        </el-icon>
        <span>用户管理</span>
      </el-menu-item>
      <el-menu-item index="2" route="/orders">
        <el-icon>
          <OrderIcon />
        </el-icon>
        <span>订单管理</span>
      </el-menu-item>
      <el-menu-item index="3" route="/products">
        <el-icon>
          <ProductIcon />
        </el-icon>
        <span>商品管理</span>
      </el-menu-item>
      <el-menu-item index="6" route="/marketing/campaign">
        <el-icon>
          <Present />
        </el-icon>
        <span>营销活动</span>
      </el-menu-item>
      <el-menu-item index="4" route="/statistics">
        <el-icon>
          <StatisticIcon />
        </el-icon>
        <span>数据统计</span>
      </el-menu-item>
      <el-menu-item index="5" route="/setting">
        <el-icon>
          <Setting />
        </el-icon>
        <span>设置</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<style lang="scss" scoped>
.home-aside {
  background-color: #001529;
  height: 100%;

  .el-menu {
    border: none;

    .el-menu-item {
      &:hover {
        color: #ffffff;
      }
    }

    .el-menu-item.is-active {
      background-color: #1890ff;
    }
  }
}

.main-aside-header {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  height: 60px;

  img {
    width: 30px;
  }

  h3 {
    color: #fff;
  }
}
</style>
